<template>
  <div>
    <div id="content">
    <div class="detail cle">
      <div class="goodDetails_name_img">
             <div style="width: 300px;height: 300px">
                    <img :src="ImgUrl" style="width: 100%;height: 100%">
             </div>
            <div class="little_img" >
                <ul>
                    <li v-for="img in imgUrl" @click='getIndex(img.url)' >
                        <img :src="img.url"  style="width: 50px; height: 50px" >
                    </li>
                </ul>
            </div>

      </div>
    </div>
    </div>
  </div>
</template>

<script>
  // import topBar from '@/components/topBar'
  // import middle from '@/components/middle'
  // import series from '@/components/series'
  // import myfooter from '@/components/myfooter'

  export default {
    // components:{ topBar,middle,series,myfooter},
    name: "index",
    data() {
      return {
        imgUrl: [
          { index:1, url: 'http://img.tea7.com/0093503_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:2, url: 'http://img.tea7.com/0093506_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:3, url: 'http://img.tea7.com/0093507_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:4, url: 'http://img.tea7.com/0093504_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:5, url: 'http://img.tea7.com/0093505_0.jpeg?x-oss-process=image/resize,w_500' },
        ],
        //大图片默认显示第一张
        ImgUrl:'http://img.tea7.com/0093503_0.jpeg?x-oss-process=image/resize,w_500',
        index:1
      }
    }
    ,methods:{
      getIndex(imgUrl){
        this.ImgUrl = imgUrl;
      }
    }
  }
</script>

<style scoped>
#center{
  width: 1200px;
  margin: 20px auto;
}
.detail {
  border: 1px solid #dedede;
  border-top-color: #d5d5d5;
  /*background: url(../images/seemore-bg.png) right 0 repeat-y #fff;*/
  position: relative;
}
.item_cover {
  width: 410px;
  position: relative;
  float: left;
}
.little_img{
  width: 384px;
}
.little_img ul {
  padding: 15px 0;
  height: 56px;
  width: 0;
  overflow: hidden;
  margin: 0 auto;
  display:inline;
}
  .little_img li{
    display:inline;
    height: 50px;
    width: 50px;
    border: 1px solid ;
    margin: 0 4px 50px;
    cursor: pointer;
    padding: 2px;
    float: left;
    position: relative;
  }
.ss{
  border: 1px solid red;
}
</style>
